import React, { useState,useEffect } from 'react'
import { Form, Input, Modal, Radio, DatePicker, } from 'antd'
import { snapId,update } from '../../services/order'
import { useSelector, useDispatch } from 'react-redux'
import { setUpdateVisible } from '../../store/slices/orderSlice'
import moment from 'moment';

export default function Update ({ show,orderData }) {
  let { updateVisible } = useSelector(state => state.order);
  console.log(orderData);


  const { TextArea } = Input;
  let dispatch = useDispatch()
  const [form] = Form.useForm()

  const handleOk = async () => {
    
    console.log(JSON.parse(form.getFieldsValue().users));
    if (form.getFieldsValue().users) {
      await update({ _id: orderData._id, ...form.getFieldsValue(),users:JSON.parse(form.getFieldsValue().users) })
    }
    
    show()
    dispatch(setUpdateVisible(false))
  }

  const handleCancel = () => {
    dispatch(setUpdateVisible(false))
  }
  
  if (orderData) {
    form.setFieldsValue({...orderData,users: JSON.stringify(orderData.users)});
  }

  return (
    <div>
      <Modal
        title='修改订单'
        visible={updateVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          name='updateForm'
          form={form}
          labelCol={{
            span: 6
          }}
          wrapperCol={{
            span: 16
          }}
          autoComplete='off'
        >
          <Form.Item
            label='下单时间'
            name='time'
            rules={[
              {
                required: true,
                message: '请输入下单时间'
              }
            ]}
            hasFeedback
          >
            <Input />
          </Form.Item>
          <Form.Item
            label='用户信息'
            name='users'
            rules={[
              {
                required: true,
                message: '请输入用户ID'
              }
            ]}

            hasFeedback
          >
            <TextArea rows={4} disabled />
          </Form.Item>
          <Form.Item name='state' label='是否删除'>
            <Radio.Group>
              <Radio value='是'> 是 </Radio> <Radio value='否'> 否 </Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
